<template>
    <el-menu default-active="2" class="el-menu-vertical-demo" text-color="#fff" active-text-color="#ffd04b"
        background-color="#2d3a4b" router unique-opened :collapse="isCollapse" style="height: 100%;">

        <MenuItem :menu="item" v-for="(item) in menuList" :key="item.id">
        </MenuItem>

    </el-menu>
</template>

<script setup>
import MenuItem from './MenuItem.vue';
import { computed, ref, watch } from 'vue';
import { useMenuStore } from '@/store/menu/index.js'

const store = useMenuStore()

const isCollapse = computed(() => {
    return !store.getCollapse
})

const menuList = computed(() => {
    return store.menuList
})



</script>

<style scoped>
.el-menu {
    border: none;
}
</style>